<template>
  <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg h-full !p-6px">
    <template #title>
      <div class="flex items-center">
        <div class="cursor-pointer">{{ datalist.name }}</div>
        <ArrowRightOutlined class="ml-10px cursor-pointer" />
      </div>
    </template>
    <template #extra>
      <EditFilled class="cursor-pointer" v-if="datalist.ant != 3" @click="editget(datalist.ant)" />
      <div v-if="datalist.ant == 3" class="flex">
        <EllipticTabs :tablist="datalist.tabsant" @change="changeTabs" />
        <a-button type="default" size="small" class="ml-10px"> 升级 </a-button>
      </div>
    </template>

    <div class="overflow-y-auto overflow-x-hidden h-110px w-1/1" v-if="datalist.ant != 3">
      <List class="">
        <Row :gutter="16">
          <template v-for="item in cardList()" :key="item.title">
            <Col :span="11">
              <ListItem>
                <Card :hoverable="true">
                  <div class="flex items-center">
                    <AppstoreFilled />
                    <div class="ml-10px">
                      {{ item.title }}
                    </div>
                  </div>
                </Card>
              </ListItem>
            </Col>
          </template>
        </Row>
      </List>
    </div>

    <div v-if="datalist.ant == 3" class="h-110px overflow-y-auto overflow-x-hidden">
      <div class="flex justify-between">
        <div>{{ '设备' }}</div>
        <div class="flex w-110px">
          <div class="w-100px">0 / 300</div>
          <Progress class="w-100px" :percent="20" size="small" :showInfo="false" />
        </div>
      </div>
    </div>

    <EditModal @register="register1" />
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import EllipticTabs from './EllipticTabs.vue';
  import EditModal from './EditModal.vue';
  import { useModal } from '/@/components/Modal';
  import { Card, Row, Col, List, Progress } from 'ant-design-vue';
  import { ArrowRightOutlined, EditFilled, AppstoreFilled } from '@ant-design/icons-vue';

  defineProps(['datalist']);

  const parmes = ref();
  const [register1, { openModal: openModal1 }] = useModal();

  const cardList = () => {
    const result: any[] = [];
    for (let i = 0; i < 11; i++) {
      result.push({
        title: '所有设备',
        icon: 'logos:vue',
        color: '#1890ff',
        active: '100',
        new: '1,799',
        download: 'bx:bx-download',
      });
    }
    return result;
  };

  const editget = (e) => {
    if (e == 1) {
      parmes.value = {
        title: '快速链接',
        arr: [
          { name: '警报', icon: '111' },
          { name: '仪表板', icon: '111' },
          { name: '设备', icon: '111' },
          { name: '警报', icon: '111' },
          { name: '所有客户', icon: '111' },
        ],
      };
    } else if (e == 2) {
      parmes.value = {
        title: '文档',
      };
    }
    openModal1(true, parmes.value);
  };

  const changeTabs = (_e: any) => {
    // console.log(e, '选中值');
  };
</script>

<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 10px !important;
  }

  :deep(.ant-card-extra) {
    padding: 0px 0px !important;
  }
  :deep(.py-4px) {
    padding: 1px 11px !important;
  }
</style>
